<template>
    <div class="home">
        <dv-border-box-9>
            <el-container>
                <el-header>
                        <span style="font-size: xx-small;color: aquamarine">
                             {{newDate}}
                        </span>
                    <span style="font-size: xx-large;font-family: 华文行楷">智慧消防平台</span>
                    <el-dropdown :hide-on-click="false">
            <span class="el-dropdown-link">智慧消防<i class="el-icon-setting">
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item>1</el-dropdown-item>
                 <el-dropdown-item>2</el-dropdown-item>
                 <el-dropdown-item>3</el-dropdown-item>
                 <el-dropdown-item>4</el-dropdown-item>
                 <el-dropdown-item>5</el-dropdown-item>
               </el-dropdown-menu>
            </i></span>
                    </el-dropdown>
                </el-header>
                <template>
                    <el-tabs v-model="activeName" @tab-click="handleClick"stretch="true">
                        <el-tab-pane label="首页" name="first">
                            <el-main>
                                <el-row :gutter="24">
                                    <el-col :span="6">
                                        <dv-border-box-8>
                                            <dv-conical-column-chart :config="conical" style="width:100%;height:140px;" />
                                        </dv-border-box-8>
                                    </el-col>
                                    <el-col :span="6":offset="12">
                                        <dv-border-box-8>
                                            <div style="display:flex" >
                                                <dv-water-level-pond :config="hydrograph" style="width:120px;height:120px" />
                                                <dv-water-level-pond :config="hydrograph" style="width:120px;height:120px" />
                                            </div>
                                        </dv-border-box-8>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="24">
                                    <el-col :span="6">
                                             <span>
                                                 <dv-border-box-8>
                                                     <dv-active-ring-chart :config="configRingchart" style="width:255px;height:165px" />
                                                 </dv-border-box-8>
                                             </span>
                                    </el-col>
                                    <el-col :span="6":offset="12">
                                        <dv-border-box-8>
                                            <div  ref="bingChart"style="width:100%;height:100%"></div>
                                        </dv-border-box-8>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="24">
                                    <el-col :span="6">
                                        <dv-border-box-8>
                                            <div  ref="zhexianChart"style="width:100%;height:160px">
                                            </div>
                                        </dv-border-box-8>
                                    </el-col>
                                    <el-col :span="6":offset="12">
                                        <dv-border-box-8>
                                            <dv-scroll-board :config="carousellist" style="width:285px;height:165px" />
                                        </dv-border-box-8>
                                    </el-col>
                                </el-row>
                            </el-main>
                        </el-tab-pane>
                        <el-tab-pane label="1" name="second"><el-empty description="描述文字"></el-empty></el-tab-pane>
                        <el-tab-pane label="2" name="third"><el-empty description="描述文字"></el-empty></el-tab-pane>
                        <el-tab-pane label="3" name="forth"><el-empty description="描述文字"></el-empty></el-tab-pane>
                        <el-tab-pane label="4" name="fifth"><el-empty description="描述文字"></el-empty></el-tab-pane>
                        <el-tab-pane label="5" name="sixth"><el-empty description="描述文字"></el-empty></el-tab-pane>
                    </el-tabs>
                </template>
            </el-container>
        </dv-border-box-9>
    </div>
</template>

<script>
    export default {

        name: 'HomeView',
        data() {
            return {
                activeName: 'first',
                configRingchart: {
                    radius: 65,
                    data: [
                        {
                            name: '烟感',
                            value: 64
                        },
                        {
                            name: '燃气',
                            value: 1
                        },
                        {
                            name: '电气火灾',
                            value: 17
                        }
                    ],
                    color: [
                        "#ff7f50",
                        "#008b8b",
                        "#FFF803",
                    ],
                    digitalFlopStyle: {
                        fontSize: 20
                    },
                    lineWidth: 10
                },//动态环图
                carousellist: {
                    data: [
                        ['设备号:'],
                        ['地址:'],
                        ['报警:'],
                        ['--------------------------------------------'],
                        ['设备号:'],
                        ['地址:'],
                        ['报警:'],
                        ['--------------------------------------------'],
                        ['设备号:'],
                        ['地址:'],
                        ['报警:'],
                        ['--------------------------------------------'],
                    ],
                    oddRowBGC: 'transparent',
                    evenRowBGC: 'transparent',
                    waitTime: 1000,
                    align: ['left'],
                    carousel: 'page',
                },//轮播表
                hydrograph: {
                    data: [0],
                    shape: 'round',
                    waveOpacity: 0.5,
                    colors: ['chartreuse', '#00ffff']
                },
                conical:{
                    data: [
                        {
                            name: '下级单位',
                            value: 0
                        },
                        {
                            name: '安装',
                            value: 82
                        },
                        {
                            name: '离线',
                            value: 13
                        },
                        {
                            name: '在线率(%)',
                            value: 84
                        },
                        {
                            name: '在线',
                            value: 69
                        }
                    ],
                    showValue: true,
                    imgSideLength:15,
                },//锥形柱体
                newDate: new Date(),
                echart1: null,
                echartData1: {}
            }
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            initDrowzhexianLine(){
                let zhexianChart = this.$echarts.init(this.$refs['zhexianChart'])
                let option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['在线', '离线', '报警', '故障'],
                        textStyle :{
                            color: "cornsilk"
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                        axisLabel:{
                            show:true,
                            textStyle:{
                                color: "cornsilk"
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel:{
                            show:true,
                            textStyle:{
                                color: "cornsilk"
                            }
                        }
                    },
                    series: [
                        {
                            name: '在线',
                            type: 'line',
                            stack: 'Total',
                            data: [12, 13, 10, 13, 9, 23, 21],
                            color:'darkgreen'
                        },
                        {
                            name: '离线',
                            type: 'line',
                            stack: 'Total',
                            data: [22, 18, 19, 23, 29, 33 ,31]
                        },
                        {
                            name: '报警',
                            type: 'line',
                            stack: 'Total',
                            data: [15, 23, 20, 15, 19, 33, 41]
                        },
                        {
                            name: '故障',
                            type: 'line',
                            stack: 'Total',
                            data: [0,1,0,1,0,1,1]
                        },
                    ]
                };
                zhexianChart.setOption(option);
            },
            initDrowbingLine(){
                let bingChart = this.$echarts.init(this.$refs['bingChart'])
                let option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                { value: 104, name: '未处理' },
                                { value: 73, name: '其他' },
                                { value: 58, name: '真实' },
                                { value: 48, name: '误报' },
                                { value: 30, name: '测试' }
                            ],
                            label:
                                {
                                    textStyle :{
                                        color: "cornsilk"
                                    }
                                },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                bingChart.setOption(option);
            }
        },
        mounted() {

            let that = this
            this.timer = setInterval(function () {
                that.newDate = new Date().toLocaleString()
            })
            this.initDrowzhexianLine();
            this.initDrowbingLine();
        },
        //销毁
        beforeDestroy: function () {
            if (this.timer) {
                clearInterval(this.timer)
            }
        }
    }
</script>
<style>
    .el-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        background:#242E66;
        color: dodgerblue;
    }
    .el-main {
        text-align: center;
        line-height:160px;
        height:600px;
        background: darkblue;
        border-radius: 4px;
    }
    .el-row{
        text-align: center;
        padding-bottom: 0px;
    }
    .el-col {
        height: 185px;
        text-align: center;
        background: transparent;
    }
    .dv-scroll-board {
        color: lightskyblue;
    }
    .el-tabs__header{
        background: #242E66;
        padding-bottom: 0;
    }
    .el-dropdown {
        color: darkseagreen;
    }
    .dv-active-ring-chart .active-ring-info .active-ring-name {
        overflow: visible;
    }
    .dv-active-ring-chart .active-ring-info{
        display: flex; justify-content: flex-start;
    }
    .el-tabs__content{
        margin-top: -15px !important;
    }
    .dv-water-pond-level svg{
        top: 15px;
        left: 19px;
    }
    .el-tabs__item {
        color: beige;
    }
    .dv-water-pond-level canvas {
        margin-top: 26px;
        margin-left: 25px;
    }
    .dv-active-ring-chart .active-ring-info .active-ring-name {
        color: #16beb6;
    }
</style>